<template>
	<n-modal
		v-model:show="showModal"
		title="查看详情"
		preset="dialog"
		:show-icon="false"
		:mask-closable="false"
		style="width: 303px"
		@close="handleClose"
	>
		<div class="ll-modal-body">
			<div ref="qrcode" class="ll-qrcode"></div>
			<div class="ll-qrcode-tip">请用微信扫描二维码进行预览</div>
		</div>
	</n-modal>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue';
import { qrcanvas } from 'qrcanvas';
// API接口
import { tdProductDetail } from '@/api/product';

const props = defineProps({
	modal: Boolean,
	productId: {
		type: Number,
		default: 0
	}
});

const emit = defineEmits(['update:modal']);

const showModal = ref(props.modal);
const qrcode = ref(null);

// 操作关闭
const handleClose = () => {
	showModal.value = false;
	emit('update:modal', showModal.value);
};

// 生成二维码
const generateQrcode = (url) => {
	nextTick(() => {
		const canvas = qrcanvas({
			data: url
		});
		qrcode.value.innerHTML = '';
		qrcode.value.appendChild(canvas);
	});
};

const getProductDetail = async () => {
	const setFrom = {
		productId: props.productId
	};
	const res = await tdProductDetail(setFrom);
	if (res.code === 200) {
		generateQrcode(res.data);
	}
};

watch(
	() => ({ ...props }),
	(count) => {
		showModal.value = count.modal;
		if (count.modal) {
			getProductDetail();
		}
	}
);
</script>

<style lang="less" scoped>
.ll-qrcode {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 28px;
}
.ll-qrcode-tip {
	text-align: center;
	font-size: 14px;
	color: #333333;
	margin-top: 28px;
}
</style>
